<script setup lang='ts'>
import { userApis } from '@/apis'
import { SvgIcon } from '@/components/svg-icon'
import { useToken } from '@/hooks'
import { useAppStore, useUserStore } from '@/store'
import { message } from 'ant-design-vue'

const appStore = useAppStore()
const rules = {
  username: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
}
const { getRoutes, push } = useRouter()
const { setToken } = useToken()
const formState = reactive({
  username: '18560010960',
  password: 'qy123456',
  platform: 'ops',
})

async function onLogin() {
  appStore.loginLoading = true
  try {
    const res = await userApis.login(formState)
    appStore.loginLoading = false
    if (res.status === 0) {
      message.success('登录成功')
      // 设置用户信息和token
      useUserStore().setUserInfo(res.data)
      setToken(res.token as string)
      setTimeout(() => {
        push('/')
      }, 800)
    }
  }
  catch (err) {
    console.log(err)
  }
  finally {
    appStore.loginLoading = false
  }
}
onMounted(() => {
  console.log(getRoutes())
})
</script>

<template>
  <div
    bg="[url(@/assets/images/login-bg.png)] center no-repeat cover"
    b="1px solid #E6E8EA"
    wh-full
    class="login"
  >
    <div
      w618px
      h640px
      bg-white
      rd-16px
      style="box-shadow: 0 16px 32px 0 rgba(1, 0, 56, 0.04)"
      p="x31px y32px"
      absolute
      top="50%"
      right-254px
      translate-y="-50%"
    >
      <div c="#202123" text-32px font-600 lh-40px>
        欢迎登录 轻萤运维端
      </div>
      <SvgIcon icon="local-logo" m="x-auto t88px" size="88px " />
      <AForm
        :model="formState"
        :rules="rules"
        autocomplete="off"
        mt48px
        px78px
        @finish="onLogin"
      >
        <AFormItem name="username">
          <AInput v-model:value="formState.username" placeholder="请输入账号">
            <template #prefix>
              <SvgIcon icon="local-user" w16px h16px />
            </template>
          </AInput>
        </AFormItem>
        <AFormItem name="password">
          <AInputPassword
            v-model:value="formState.password"
            placeholder="请输入密码"
          >
            <template #prefix>
              <SvgIcon icon="local-lock-on" w18px h18px />
            </template>
            <template #iconRender="v">
              <SvgIcon v-if="v" icon="local-browse" w18px h18px cursor-pointer />
              <SvgIcon v-else icon="local-browse-off" w18px h18px cursor-pointer />
            </template>
          </AInputPassword>
        </AFormItem>
        <AFormItem mt24px>
          <AButton
            type="primary"
            html-type="submit"
            h48px
            wfull
            text-16px
            :loading="appStore.loginLoading"
          >
            确定
          </AButton>
        </AFormItem>
      </AForm>
    </div>
  </div>
</template>

<style lang="less">
  .login {
    .ant-form {
      .ant-form-item {
        --uno: m0;

        + .ant-form-item {
          --uno: mt16px;
        }

        .ant-form-item-control-input {
          .ant-form-item-control-input-content {
            .ant-input-affix-wrapper {
              --uno: h48px text-16px c-[#9CA1A8];

              .ant-input {
                --uno: c-inherit;
              }

              .ant-input-prefix {
                --uno: w18px me8px;
              }
            }
          }
        }
      }
    }
  }
</style>
